<!doctype html> 
<html> 
<head> 
<title>Test Modal Dialog</title> 
</head> 
<body>

<h3>Tests</h3>
<button onclick="doModal()">Open the modal dialog</button><br>
<button onclick="window.close()">Close this window</button>

<h3>Time (timers are suppresed while the modal dialog is open)</h3>
<div id="time"></div>

<h3>Result Log</h3>
<div id="result"></div>

<script>

function init()
{
  timer();
  setInterval(timer, 200);
}

function timer()
{
  updateId("time",new Date().toLocaleString());
}

function updateId(id, html, append)
{
  id = document.getElementById(id);
  if (typeof html == "boolean")
    html = html?"Yes":"No";
  if (append)
    id.innerHTML += html + '<br>';
  else
    id.innerHTML = html;
}

function doModal()
{
  updateId('result', "Modal dialog is open...", true);
  var result = window.showModalDialog("http://tests/modaldialog", { msg:"Hi from parent"} );
  if (typeof result == "object") {
    updateId('result', "Result: " + result.msg, true);
  } else {
    updateId('result', "Dialog was closed", true);
  }
}

window.addEventListener('load', init, false);

</script>

</body> 
</html>
